<!-- 首页气体钢瓶统计 -->
<template>
  <div class="wrap-gascylinder-info">
    <p class="wrap-info-title">气体钢瓶（瓶）</p>
    <ul>
      <li v-for="(item, index) in dataArr" :key="index">
        <img :src="item.img" alt="" class="warp-info-img" />
        <div>
          <span :class="{ 'wrap-info-count': true, 'color-orange': index === 2, 'color-yellow': index === 3 }">{{ item.count }}</span>
          <span class="wrap-info-name">{{ item.name }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {}
    },
    components: {},
    computed: {
      dataArr: {
        get () {
          const arr = this.dataList.map(item => {
            return {
              name: item.name,
              count: item.count,
              img: this.dataFormatImg(item.name)
            }
          })
          return arr
        }
      }
    },
    created () {},
    mounted () {},
    methods: {
      dataFormatImg (name) {
        let icon = ''
        switch (name) {
          case '购买总数':
            icon = require('@/assets/images/viewIcon/icon_sy_qtgp1.png')
            break
          case '存放数量':
            icon = require('@/assets/images/viewIcon/icon_sy_qtgp2.png')
            break
          case '管制数量':
            icon = require('@/assets/images/viewIcon/icon_sy_qtgp3.png')
            break
          case '超一年数量':
            icon = require('@/assets/images/viewIcon/icon_sy_qtgp4.png')
            break
          default:
            break
        }
        return icon
      }
    }
  }
</script>
<style lang="less" scoped>
  .wrap-gascylinder-info {
    z-index: 4;
    height: 46%;
    position: relative;
    width: 100%;
    overflow: hidden;
    .wrap-info-title {
      font-size: 22px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 30px;
    }
    ul {
      height: calc(100% - 30px);
      li {
        height: 20%;
        width: 100%;
        display: flex;
        align-items: center;
        margin: 10px 0;
        div {
          margin-left: 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .wrap-info-name {
            font-size: 14px;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            line-height: 20px;
          }
          .wrap-info-count {
            font-size: 30px;
            font-weight: 600;
            color: rgba(255, 255, 255, 1);
            line-height: 37px;
          }
          .color-orange {
            color: #ff8f00;
          }
          .color-yellow {
            color: #ffe300;
          }
        }
      }
    }
  }
  @media screen and (max-height: 860px) {
    .wrap-info-name {
      font-size: 12px !important;
    }
    .wrap-info-count {
      font-size: 20px !important;
      line-height: 1.1 !important;
    }
    .warp-info-img {
      width: auto;
      height: 100%;
    }
    .wrap-info-title {
      font-size: 18px !important;
    }
  }
</style>
